<template>
  <div class="data-container">
    <div class="title">
      <div class="text">信息动态</div>
      <i class="icon el-icon-tickets" @click="handleDetail({})"></i>
    </div>
    <div class="line">
      <el-date-picker value-format="yyyy-MM-dd" @change="handleChange" v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
      <el-checkbox-group v-model="label2" @change="handleChange">
        <el-checkbox label="招标"></el-checkbox>
        <el-checkbox label="拍卖"></el-checkbox>
        <el-checkbox label="挂牌"></el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="line">
      <el-tabs v-model="cls" @tab-click="handleClick">
        <el-tab-pane label="按日" name="日"></el-tab-pane>
        <el-tab-pane label="按月" name="月"></el-tab-pane>
      </el-tabs>
    </div>
    <div key="echart" id="echarts1"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { apiPMUpdate } from '@/api/industryData/index'
import { formatFormData, getDay, formatDate } from '@/utils'

export default {
  name: 'panel2',
  props: {
    source: String,
  },
  data() {
    return {
      myEcharts: '',
      dataList: [],
      option: {},
      time: [],
      cls: '日',
      label2: ['招标', '拍卖', '挂牌'],
    }
  },

  mounted() {
    this.init()
    this.getData()
  },
  methods: {
    // 初始化
    init() {
      this.time = [formatDate(getDay(-6), 'Y-M-D'), formatDate(new Date(), 'Y-M-D')]
    },
    // 获取数据
    getData() {
      apiPMUpdate(
        formatFormData({
          label2: this.label2.length > 0 ? JSON.stringify(this.label2) : '',
          source: this.source,
          cls: this.cls,
          fb_start_time: this.time ? this.time[0] : '',
          fb_end_time: this.time ? this.time[1] : '',
        })
      ).then((res) => {
        const { data } = res
        this.dataList = data
        this.$nextTick(() => {
          this.initEcharts()
        })
      })
    },
    // 查看详情
    handleDetail(query) {
      query.source = this.source
      query.label2 = this.label2.join(',')
      query.start_time = this.time ? this.time[0] : ''
      query.end_time = this.time ? this.time[1] : ''
      this.$router.push({
        name: 'AuctionDetail',
        query,
      })
    },
    // 初始化图表
    initEcharts() {
      if (!this.dataList) {
        this.dataList = []
      }
      const xAxis = this.dataList.map((item) => {
        return item.fb_day
      })
      const echartsData = this.dataList.map((item) => {
        return item.num
      })
      this.myEcharts = echarts.init(document.getElementById('echarts1'))
      this.option = {
        tooltip: {},
        xAxis: {
          data: xAxis,
          axisLabel: {
            color: '#ffffff',
          },
        },
        yAxis: {
          axisLabel: {
            color: '#ffffff',
          },
        },
        series: [
          {
            type: 'bar',
            color: ['#68cee0', 'rgba(104, 206, 224, 0.8)', 'rgba(104, 206, 224, 0.6)', 'rgba(104, 206, 224, 0.4)', 'rgba(104, 206, 224, 0.2)', 'rgba(255, 255, 255, 0.2)', 'rgba(255, 255, 255, 0.4)', 'rgba(255, 255, 255, 0.6)'],
            data: echartsData,
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myEcharts.setOption(this.option)
    },
    onResize() {
      if (this.myEcharts) {
        this.myEcharts.resize()
      }
    },
    handleChange() {
      this.getData()
    },
    handleClick() {
      this.getData()
    },
  },
}
</script>
<style lang="scss" scoped>
$bgColor: #060a22;
$mainColor: #68cee0;
$mainColorOpcity: rgba(104, 206, 224, 0.3);
.data-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}
#echarts1 {
  width: 100%;
  height: 100%;
}
.title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  .icon {
    cursor: pointer;
  }
}
.line {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.el-date-editor {
  border-color: #ffffff;
  background: none;
  height: 30px;
  color: #ffffff;
  input {
    background: none;
  }
}
::v-deep .el-date-editor .el-range__icon {
  color: #ffffff !important;
  height: 30px;
  line-height: 30px !important;
}
::v-deep .el-range-editor .el-range-input {
  background: none;
  color: #ffffff;
}
::v-deep .el-date-editor .el-range-separator {
  color: #ffffff;
  height: 30px;
  line-height: 30px;
}
::v-deep .el-input__icon.el-range__close-icon {
  height: auto;
}
::v-deep .el-tabs {
  .el-tabs__item {
    color: #ffffff;
    &.is-active {
      color: $mainColor;
    }
  }
  .el-tabs__active-bar {
    background-color: $mainColor;
  }
}
::v-deep .el-checkbox-group {
  margin-left: 20px;
  .el-checkbox .el-checkbox__label {
    color: #ffffff;
  }
  .el-checkbox.is-checked {
    .el-checkbox__label {
      color: $mainColor;
    }
    .el-checkbox__inner {
      background-color: $mainColor;
    }
  }
}
</style>
